<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DTU管理系统</title>
    <!--图标-->
    <link rel="icon" href="/images/icon.png" type="image/png">
    <!-- 引入Bootstrap 5 CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="/css/all.min.css">
    <!-- 引入jQuery -->
    <script src="/js/jquery-3.6.0.min.js"></script>
    <!-- 引入Bootstrap JS (放在body底部更好，但为了简化，暂时放在这里) -->
    <script src="/js/bootstrap.bundle.min.js"></script>
    <style>
        :root {
            --primary-color: #165DFF;
            --secondary-color: #00C2FF;
            --success-color: #52C41A;
            --warning-color: #FAAD14;
            --danger-color: #F5222D;
            --info-color: #8C8C8C;
            --bg-color: #F0F2F5;
            --card-bg: #FFFFFF;
            --text-primary: #262626;
            --text-secondary: #8C8C8C;
            --border-color: #D9D9D9;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-primary);
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            box-shadow: var(--shadow);
        }

        .header h1 {
            margin: 0;
            font-weight: 600;
        }

        .header p {
            margin: 0.5rem 0 0 0;
            opacity: 0.9;
        }

        .card {
            background-color: var(--card-bg);
            border: none;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 1.25rem;
            border-bottom: none;
            font-weight: 500;
        }

        .card-title {
            margin: 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        .btn {
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.2s;
            border: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background-color: var(--primary-color);
        }

        .btn-primary:hover {
            background-color: #0D47A1;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(22, 93, 255, 0.3);
        }

        .btn-danger {
            background-color: var(--danger-color);
        }

        .btn-danger:hover {
            background-color: #D32F2F;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(245, 34, 45, 0.3);
        }

        .info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .info-value {
            font-weight: 500;
        }

        .serial-number {
            font-family: 'Courier New', monospace;
            background-color: var(--bg-color);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            word-break: break-all;
        }

        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-weight: 500;
            font-size: 0.875rem;
        }

        .status-success {
            background-color: rgba(82, 196, 26, 0.1);
            color: var(--success-color);
        }

        .status-warning {
            background-color: rgba(250, 173, 20, 0.1);
            color: var(--warning-color);
        }

        .table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .table th {
            background-color: #F7F8FA;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 2px solid var(--border-color);
        }

        .table-hover tbody tr:hover {
            background-color: rgba(22, 93, 255, 0.05);
        }

        .spinner-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200px;
        }

        .alert {
            border-radius: 6px;
            border: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .alert-success {
            background-color: rgba(82, 196, 26, 0.1);
            color: var(--success-color);
        }

        .alert-danger {
            background-color: rgba(245, 34, 45, 0.1);
            color: var(--danger-color);
        }

        .alert-warning {
            background-color: rgba(250, 173, 20, 0.1);
            color: var(--warning-color);
        }

        .table-responsive {
            max-height: 600px;
            overflow-y: auto;
        }

        .data-count-badge {
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 0.75rem;
        }
    </style>
</head>
<body>
<!-- 头部 -->
<header class="header">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1><i class="fas fa-server"></i> DTU管理系统</h1>
                <p>致筑网智能设备管理与数据监控平台</p>
            </div>
        </div>
    </div>
</header>

<div class="container">
    <!-- 消息提示区域 -->
    <div id="message" class="alert d-none" role="alert">
        <span id="message-content"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- DTU信息和系统状态卡片 -->
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-microchip"></i> DTU基本信息
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="info-item">
                                <span class="info-label">连接时间:</span>
                                <span id="connectTime" class="info-value">-</span>
                            </div>
                            <!-- 当前状态已移除 -->
                            <div class="info-item">
                                <span class="info-label">DTU序列号:</span>
                                <span id="dtuSerialNumber" class="serial-number">未获取到序列号</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-item">
                                <span class="info-label">服务器时间:</span>
                                <span id="serverTime" class="info-value"></span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">数据采集数:</span>
                                <span id="dataCount" class="info-value"><span class="badge bg-primary">0</span></span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">&nbsp;</span>
                                <span class="info-value">&nbsp;</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-2 d-flex justify-content-between">
                        <button id="networkStatusBtn" class="btn btn-primary">
                            <i class="fas fa-wifi"></i> 网络状态监测
                        </button>
                        <div>
                            <button id="upgradeBtn" class="btn btn-warning me-2">
                                <i class="fas fa-download"></i> DTU升级
                            </button>
                            <button id="restartBtn" class="btn btn-danger">
                                <i class="fas fa-redo-alt"></i> 重启DTU
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 盒子数据列表 -->
    <div class="card position-relative">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col">
                    <h5 class="card-title">
                        <i class="fas fa-database"></i> DTU监测数据列表
                        <span id="totalDataCount" class="badge bg-primary ms-2">0 条数据</span>
                    </h5>
                </div>
                <div class="col text-end">
                    <button id="clearDataBtn" class="btn btn-danger me-2">
                        <i class="fas fa-trash-alt"></i> 清空数据
                    </button>
                    <button id="refreshDataBtn" class="btn btn-primary">
                        <i class="fas fa-sync-alt"></i> 刷新数据
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- 筛选条件区域 -->
            <div class="mb-4 p-3 bg-light rounded">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <div class="form-group row align-items-center mb-0">
                            <label for="uploadStatusFilter" class="form-label col-sm-3 mb-0">上传状态:</label>
                            <div class="col-sm-9">
                                <select id="uploadStatusFilter" class="form-select">
                                    <option value="">全部</option>
                                    <option value="1">已上传</option>
                                    <option value="0">未上传</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="dataTableContainer">
                <div class="spinner-container">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="mt-5 py-3 bg-light">
    <div class="container text-center text-muted">
        <p><a href="https://www.zhizhuwang.online/">© ZZW - 智能设备管理平台</a></p>
    </div>
</footer>

<!-- jQuery和Bootstrap已在页面头部引入本地版本 -->

<script>
    $(document).ready(function() {
        // 优化初始化顺序，先显示UI再加载数据
        updateServerTime(); // 先更新时间，这是轻量级操作

        // 使用setTimeout让DOM完全就绪后再加载数据
        setTimeout(() => {
            // 并行加载DTU序列号和数据列表，提高初始化速度
            $.when(
                $.Deferred().resolve(loadDtuSerialNumber()),
                $.Deferred().resolve(loadDataList())
            ).done(() => {
                console.log('页面初始化完成');
            });
        }, 100);

        // 定时更新服务器时间
        setInterval(updateServerTime, 60000); // 每分钟更新一次

        // 重启DTU按钮点击事件
        $('#restartBtn').click(function() {
            if (confirm('确定要重启DTU吗？此操作可能导致设备暂时离线。')) {
                showLoading(true);
                $.ajax({
                    url: '/dtu/restart',
                    type: 'POST',
                    timeout: 15000, // 设置超时时间为15秒
                    success: function(response) {
                        showLoading(false);
                        if (response) {
                            showMessage('success', 'DTU重启指令已发送，设备将在几秒后重新连接');

                            // 3秒后尝试重新获取序列号
                            setTimeout(function() {
                                loadDtuSerialNumber();
                            }, 3000);
                        } else {
                            showMessage('error', 'DTU重启失败，请重试');
                        }
                    },
                    error: function() {
                        showLoading(false);
                        showMessage('error', '通信错误，请检查网络连接');
                    }
                });
            }
        });

        // DTU升级按钮点击事件
        $('#upgradeBtn').click(function() {
            if (confirm('确定要进行DTU升级吗？升级过程中请勿关闭页面或断开连接。')) {
                showLoading(true);
                $.ajax({
                    url: '/dtu/upgrade',
                    type: 'POST',
                    timeout: 30000, // 设置超时时间为30秒
                    success: function(response) {
                        showLoading(false);
                        // 直接弹窗显示返回结果
                        alert('升级结果：\n' + response);
                    },
                    error: function(xhr) {
                        showLoading(false);
                        // 根据不同的错误类型显示不同的提示
                        if (xhr.status === 500) {
                            showMessage('error', '服务器内部错误，请联系管理员检查日志');
                            console.error('DTU升级失败（500错误）:', xhr.responseText);
                        } else {
                            showMessage('error', '升级请求失败，请检查网络连接后重试');
                        }
                    }
                });
            }
        });


        // 清空数据按钮点击事件
        $('#clearDataBtn').click(function() {
            if (confirm('确定要清空所有数据吗？此操作不可撤销！')) {
                showLoading(true);
                $.ajax({
                    url: '/dtu/removeAll',
                    type: 'POST',
                    timeout: 15000, // 设置超时时间为15秒
                    success: function(response) {
                        showLoading(false);
                        if (response) {
                            showMessage('success', '所有数据已成功清空');
                            // 重新加载数据列表，显示空状态
                            loadDataList();
                            // 更新数据统计
                            $('#dataCount').html('<span class="badge bg-primary">0</span>');
                            $('#totalDataCount').text('0 条数据');
                        } else {
                            showMessage('error', '数据清空失败，请重试');
                        }
                    },
                    error: function() {
                        showLoading(false);
                        showMessage('error', '通信错误，请检查网络连接');
                    }
                });
            }
        });

        // 刷新数据按钮点击事件
        $('#refreshDataBtn').click(function() {
            // 添加防重复点击保护
            if ($(this).hasClass('disabled')) {
                return;
            }

            $(this).addClass('disabled');
            $(this).prop('title', '正在刷新...');

            // 调用加载数据函数
            loadDataList();

            // 1秒后恢复按钮状态
            setTimeout(() => {
                $(this).removeClass('disabled');
                $(this).prop('title', '刷新数据');
            }, 1000);
        });

        // 上传状态筛选下拉框变更事件
        $('#uploadStatusFilter').change(function() {
            // 当筛选条件改变时，重新加载数据列表
            loadDataList();
        });

        // 网络状态监测按钮点击事件
        $('#networkStatusBtn').click(function() {
            showLoading(true);
            $.ajax({
                url: '/dtu/networkStatus',
                type: 'GET',
                timeout: 10000, // 设置超时时间为10秒
                success: function(response) {
                    showLoading(false);
                    // 显示网络状态弹窗
                    showNetworkStatusModal(response);
                },
                error: function() {
                    showLoading(false);
                    showMessage('error', '获取网络状态失败，请重试');
                }
            });
        });
    });

    // 更新时间（直接使用客户端时间，因为服务器时间接口不存在）
    function updateServerTime() {
        // 直接使用客户端时间，避免404错误
        $('#serverTime').text(new Date().toLocaleString('zh-CN'));
    }

    // 加载DTU序列号
    function loadDtuSerialNumber() {
        $.ajax({
            url: '/dtu/getSerialNumber',
            type: 'GET',
            timeout: 8000, // 设置超时时间为8秒
            success: function(response) {
                if (response) {
                    $('#dtuSerialNumber').text(response);
                    // 设置连接时间为当前时间
                    $('#connectTime').text(new Date().toLocaleString('zh-CN'));
                }
            },
            error: function() {
                // 静默失败，不显示错误消息，避免页面频繁提示
                console.warn('获取DTU序列号失败');
            }
        });
    }

    // 加载盒子数据列表
    function loadDataList() {
        // 使用缓存的选择器以提高性能
        const $dataTableContainer = $('#dataTableContainer');
        const $uploadStatusFilter = $('#uploadStatusFilter');
        const $totalDataCount = $('#totalDataCount');
        const $dataCount = $('#dataCount');

        $dataTableContainer.html(`
                <div class="spinner-container">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            `);

        // 获取筛选条件
        const uploadStatus = $uploadStatusFilter.val();

        // 构建请求体
        const dtuDTO = {};
        if (uploadStatus !== '') {
            dtuDTO.uploadStatus = parseInt(uploadStatus);
        }

        // 使用POST请求方式并传递请求体
        $.ajax({
            url: '/dtu/dataList',
            type: 'POST',
            data: JSON.stringify(dtuDTO),
            contentType: 'application/json',
            timeout: 20000, // 设置超时时间为20秒
            success: function(data) {
                // 处理返回的数据
                let records = [];
                let totalCount = 0;

                // 根据返回数据的结构进行处理
                if (Array.isArray(data)) {
                    // 如果直接返回List
                    records = data;
                    totalCount = data.length;
                } else if (data && data.records) {
                    // 如果返回的是Page对象结构
                    records = data.records || [];
                    totalCount = data.total || records.length;
                }

                // 更新表格标题中的数据总数量
                $totalDataCount.text(`${totalCount} 条数据`);

                if (records.length > 0) {
                    renderDataTable(records, $dataTableContainer);
                    // 更新数据统计
                    $dataCount.html(`<span class="badge bg-primary">${totalCount}</span>`);
                } else {
                    $dataTableContainer.html(`
                            <div class="text-center py-4 text-muted">
                                <i class="fas fa-info-circle text-3xl mb-2"></i>
                                <p>暂无数据</p>
                            </div>
                        `);
                }
            },
            error: function(xhr) {
                console.error('加载数据失败:', xhr);
                // 安全地构建错误消息，避免模板字符串可能的问题
                const status = xhr.status || '未知';
                const statusText = xhr.statusText || '未知错误';
                $dataTableContainer.html(
                    '<div class="text-center py-4 text-danger">' +
                    '<i class="fas fa-exclamation-circle text-3xl mb-2"></i>' +
                    '<p>数据加载失败，请重试</p>' +
                    '<small class="text-muted">错误信息: ' + status + ' ' + statusText + '</small>' +
                    '</div>'
                );
            }
        });
    }

    // 渲染数据表格 - 显示所有LevelResult字段
    function renderDataTable(data, container) {
        // 为大量数据添加分页渲染逻辑
        const maxItemsPerRender = 1000; // 每次最多渲染1000条数据

        // 表格头部HTML
        let html = `
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>传感器编号</th>
                                <th>测量数据</th>
                                <th>测量时间</th>
                                <th>上传状态</th>
                                <th>任务ID</th>
                            </tr>
                        </thead>
                        <tbody>
            `;

        // 优化数据渲染性能
        if (data.length <= maxItemsPerRender) {
            // 数据量较小时直接渲染
            html += renderTableRows(data);
        } else {
            // 数据量较大时，先渲染一部分，其余部分异步渲染
            html += renderTableRows(data.slice(0, maxItemsPerRender));
            html += `
                        </tbody>
                    </table>
                </div>
                <div class="text-center mt-2 text-muted">
                    <small>正在加载更多数据...</small>
                </div>
            `;

            container.html(html);

            // 使用setTimeout异步渲染剩余数据
            setTimeout(() => {
                const remainingData = data.slice(maxItemsPerRender);
                const fullHtml = `
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>传感器编号</th>
                                        <th>测量数据</th>
                                        <th>测量时间</th>
                                        <th>上传状态</th>
                                        <th>任务ID</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${renderTableRows(data)}
                                </tbody>
                            </table>
                        </div>
                    `;
                container.html(fullHtml);
            }, 100); // 短暂延迟，让浏览器先渲染前一部分内容

            return; // 提前返回，避免后续代码执行
        }

        html += `
                        </tbody>
                    </table>
                </div>
            `;

        container.html(html);
    }

    // 渲染表格行数据的辅助函数
    function renderTableRows(data) {
        let rowsHtml = '';

        // 预编译模板，减少字符串拼接操作
        const rowTemplate = (id, sensorNo, surveyData, surveyTime, statusClass, statusText, taskId) =>
            `<tr><td>${id}</td><td>${sensorNo}</td><td>${surveyData}</td><td>${surveyTime}</td><td><span class="status-badge ${statusClass}">${statusText}</span></td><td>${taskId}</td></tr>`;

        data.forEach(item => {
            // 支持不同的数据结构格式
            const id = item.id || '-';
            const sensorNo = item.sensorNo || item.sensor_no || '-';
            const surveyData = item.surveyData || item.survey_data || '-';
            const surveyTime = item.surveyTime || item.survey_time || '-';
            const uploadStatus = item.uploadStatus || item.upload_status || 0;
            const taskId = item.taskId || item.task_id || '-';

            const statusClass = uploadStatus === 1 ? 'status-success' : 'status-warning';
            const statusText = uploadStatus === 1 ? '已上传' : '未上传';

            rowsHtml += rowTemplate(id, sensorNo, surveyData, surveyTime, statusClass, statusText, taskId);
        });

        return rowsHtml;
    }

    // 显示消息提示
    function showMessage(type, message) {
        const messageDiv = $('#message');
        const messageContent = $('#message-content');

        // 设置消息类型
        messageDiv.removeClass('alert-success alert-danger alert-warning');
        if (type === 'success') {
            messageDiv.addClass('alert-success');
            messageContent.html(`<i class="fas fa-check-circle"></i> ${message}`);
        } else if (type === 'error') {
            messageDiv.addClass('alert-danger');
            messageContent.html(`<i class="fas fa-exclamation-circle"></i> ${message}`);
        } else if (type === 'warning') {
            messageDiv.addClass('alert-warning');
            messageContent.html(`<i class="fas fa-exclamation-triangle"></i> ${message}`);
        }

        // 显示消息
        messageDiv.removeClass('d-none');

        // 3秒后自动隐藏
        setTimeout(() => {
            messageDiv.addClass('d-none');
        }, 3000);
    }

    // 显示加载状态
    function showLoading(show) {
        if (show) {
            // 禁用所有按钮
            $('button').prop('disabled', true);
        } else {
            // 恢复按钮状态
            $('button').prop('disabled', false);
        }
    }

    // 显示网络状态弹窗
    function showNetworkStatusModal(networkStatus) {
        // 检查是否已存在弹窗元素
        let modal = $('#networkStatusModal');
        if (modal.length === 0) {
            // 创建弹窗元素
            const modalHtml = `
                <div class="modal fade" id="networkStatusModal" tabindex="-1" aria-labelledby="networkStatusModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="networkStatusModalLabel">
                                    <i class="fas fa-wifi"></i> 网络状态信息
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <pre id="networkStatusContent" class="bg-light p-3 rounded overflow-auto" style="max-height: 400px;"></pre>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            // 添加到body
            $('body').append(modalHtml);
            modal = $('#networkStatusModal');
        }

        // 设置网络状态内容
        $('#networkStatusContent').text(networkStatus);

        // 显示弹窗
        modal.modal('show');
    }
</script>
</body>
</html>